import React, { Component, ReactNode } from 'react'
import { Select } from 'antd'
import { IUdFormItem } from '../../..'
import { SelectProps } from 'antd/lib/select'

const Option = Select.Option
class UdSelectScroll extends Component<IUdSelectScrollProps, IUdSelectScrollState> {

    constructor(props: IUdSelectScrollProps) {
        super(props)
        this.state = {
            items: props.items,
            optionData: [],
            pageSize: 1000,
            scrollPage: 1,
            keyWords: "",
        }
    }
    componentDidMount() {
        this.setState({ optionData: this.state.items.slice(0, 1000) })
    }

    render() {
        let { optionData } = this.state
        return (
            <Select className="ud-select-ajax" {...this.props} onPopupScroll={this.handleScroll} onSearch={this.handleOnSearch} onBlur={this.onBlur}>
                {optionData.map(({ value, title }) => (<Option value={value}>{title}</Option>))}
            </Select>
        )
    }

    private handleScroll = e => {
        e.persist();
        const { target } = e;
        // scrollHeight：代表包括当前不可见部分的元素的高度
        // scrollTop：代表当有滚动条时滚动条向下滚动的距离，也就是元素顶部被遮住的高度
        // clientHeight：包括padding但不包括border、水平滚动条、margin的元素的高度
        const rmHeight = target.scrollHeight - target.scrollTop;
        const clHeight = target.clientHeight;
        // 当下拉框失焦的时候，也就是不下拉的时候
        if (rmHeight === 0 && clHeight === 0) {
            this.setState({ scrollPage: 1 });
        } else {
            // 当下拉框下拉并且滚动条到达底部的时候
            // 可以看成是分页，当滚动到底部的时候就翻到下一页
            if (rmHeight < clHeight + 5) {
                const { scrollPage } = this.state;
                this.setState({ scrollPage: scrollPage + 1 });
                //调用处理数据的函数增加下一页的数据
                this.loadOption(scrollPage + 1);
            }
        }
    }
    private loadOption = pageIndex => {
        const { pageSize, keyWords, items } = this.state
        const newPageSize = pageSize * (pageIndex || 1)
        let newOptionsData = []
        let len = 0
        if (items.length >= newPageSize) {
            len = newPageSize;
        } else {
            len = items.length;
        }
        if (!!keyWords) {
            let data_ = items.filter(item => item.title.indexOf(keyWords) > -1) || [];
            data_.forEach((item, index) => {
                if (index < len) {
                    newOptionsData.push(item);
                }
            });
        } else {
            items.forEach((item, index) => {
                if (index < len) {
                    newOptionsData.push(item);
                }
            });
        }
        this.setState({ optionData: newOptionsData });
    }
    private handleOnSearch = title => {
        this.setState({ keyWords: title })
        this.searchValue(title)
    }
    private searchValue = (title) => {
        const list = []
        const { items } = this.state
        items.forEach(item => {
            if (item.title.indexOf(title) > -1) {
                list.push(item)
            }
        })
        // 然后只显示符合搜索条件的所有数据中的前100条
        this.setState({ optionData: list.slice(0, 1000) })
    }

    onBlur = () => {
        this.setState({ optionData: this.state.items.slice(0, 1000) });
    };
}

interface IUdSelectScrollProps extends Partial<IUdFormItem>, SelectProps {
    id?: string
    value?: any
    items: any[]
    onChange?(value: any): void
}

interface IUdSelectScrollState {
    items: any,
    optionData?: any,
    pageSize: number,
    scrollPage: number,
    keyWords: string,
}

export default UdSelectScroll